<template>
  <div>
    <div class="row">
      <div class="col-md-8">
        <div style="margin-left:10px;">
          <input type="checkbox" @click="checkAllHandler" v-model="isChecked"/> &nbsp;
          已完成{{finishedCount}}件/总计{{todos.length}}件
        </div>
        
      </div>
      <div class="col-md-4 text-right">
        <button type="button" class="btn btn-warning" @click="delFinishedTaskHandler">清除已完成任务</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    todos: Array,
    checkAll: Function,
    delFinishedTask: Function
  },
  data() {
    return {
      checkAllFlag: false
    }
  },
  computed:{
    // 计算已完成的数量
    finishedCount() {
      return this.todos.reduce((total, todo) => {
        return total + (todo.finish ? 1 : 0)
      }, 0)
    },

    isChecked: {
      get() {
        return this.finishedCount === this.todos.length && this.todos.length > 1
      },
      set(value) {
        this.checkAll(value)
      }
    }
  },
  setup() {
    return {};
  },
  methods: {
    checkAllHandler() {
      this.checkAll(this.checkAllFlag)
    },
    delFinishedTaskHandler() {
      this.delFinishedTask();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>